<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>修改大学生信息</title>
        <meta content="webkit" name="renderer">
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <link rel="stylesheet" th:href="@{/layui/css/font.css}">
        <link rel="stylesheet" th:href="@{/layui/css/xadmin.css}">
        <link rel="stylesheet" th:href="@{/layui/css/login.css}">
        <script charset="utf-8" th:src="@{/layui/lib/layui/layui.js}" type="text/javascript"></script>
        <script th:src="@{/layui/js/xadmin.js}" type="text/javascript"></script>
    </head>
    <body class="login-bg">
        <div class="layui-fluid">
            <div class="layui-row" style="width: 1100px;margin: 20px auto auto">
                <form class="layui-form" enctype="multipart/form-data" id="fm" style="height: 440px;padding: 30px 20px;background: white;border-radius: 20px">
                    <div style="display: none">
                        <label>
                            <input name="id" th:value="${student.id}">
                        </label>
                    </div>
                    <div style="float: left;margin: 70px auto auto 50px">
                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img alt="这是学生的头像" class="layui-upload-img"
                                         id="portrait" src="" style="width: 200px;height: 200px" th:src="${student.portrait}">
                                    <p id="portraitText" style="margin-top: 15px"></p>
                                </div>
                                <button class="layui-btn" id="portrait_btn" name="portrait_btn" style="width: 100%" type="button">上传个人头像</button>
                                <input id="img_url" name="portrait" th:value="${student.portrait}" type="hidden"/>
                                <hr>
                                <button class="layui-btn" id="L_repass" lay-filter="edit" lay-submit
                                        style="width: 100%" type="submit">修改信息</button>
                            </div>
                        </div>
                    </div>
                    <div style="float: left;margin: 50px auto auto 30px;width: 380px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="studentName">
                                <span class="x-red">*</span>学生姓名&emsp;
                            </label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="studentName" lay-verify="required" name="studentName" th:value="${student.studentName}" type="text">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" id="gender">性&emsp;&emsp;别</label>
                            <div class="layui-input-block" th:if="${student.gender == '男'}">
                                <input checked class="radio" name="gender" title="男" type="radio" value="男">
                                <input class="radio" name="gender" title="女" type="radio" value="女">
                            </div>
                            <div class="layui-input-block" th:if="${student.gender == '女'}">
                                <input class="radio" name="gender" title="男" type="radio" value="男">
                                <input checked class="radio" name="gender" title="女" type="radio" value="女">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="politicsName">政治面貌&emsp;</label>
                            <div class="layui-input-inline">
                                <select id="politicsName" lay-verify="required" name="politics.id">
                                    <option th:value="${student.politics.id}">[[${student.politics.politicsType}]]</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="universityName">就读大学&emsp;</label>
                            <div class="layui-input-inline">
                                <select id="universityName" lay-verify="required" name="university.id">
                                    <option th:value="${student.university.id}">[[${student.university.universityName}]]</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="majorName">主修专业&emsp;</label>
                            <div class="layui-input-inline">
                                <select id="majorName" lay-verify="required" name="major.id">
                                    <option th:value="${student.major.id}">[[${student.major.majorName}]]</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="email">邮箱地址&emsp;</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="email" name="email" th:value="${student.email}" type="text">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="phone">联系方式&emsp;</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="phone" name="phone" th:value="${student.phone}" type="text">
                            </div>
                        </div>
                    </div>

                    <div style="float:left;margin: 50px auto auto 10px;width: 380px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="bornDate">出生日期&emsp;</label>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input class="layui-input" id="bornDate" name="bornDate" th:value="${#dates.format(student.bornDate,'yyyy-MM-dd HH:mm:ss')}" type="text">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="graduateDate">毕业年月&emsp;</label>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input class="layui-input" id="graduateDate" name="graduateDate" th:value="${#dates.format(student.graduateDate,'yyyy-MM')}" type="text">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="cityName">所在地区&emsp;</label>
                            <div class="layui-input-inline">
                                <select id="cityName" lay-verify="required" name="city.id">
                                    <option th:value="${student.city.id}">[[${student.city.cityName}]]</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="companyName">兼职公司&emsp;</label>
                            <div class="layui-input-inline">
                                <select id="companyName" name="company.id">
                                    <option th:value="${student.company.id}">[[${student.company.companyName}]]</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="password">密&emsp;&emsp;码&emsp;</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="password" name="password" required th:value="${student.password}" type="password">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="re_password">确认密码&emsp;</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="re_password" lay-verify="re_password" name="re_password" required type="password">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <script>
            layui.use([ 'form', 'layer', 'laydate', 'jquery', 'upload' ], function() {
                const form = layui.form, layer = layui.layer, upload = layui.upload,
                    laydate = layui.laydate, $ = layui.jquery;
                //时间选择器
                laydate.render({
                    elem: '#bornDate',
                    type: 'datetime'
                });
                //日期选择器
                laydate.render({
                    elem: '#graduateDate',
                    type: 'month'
                });
                // 获取下拉框信息 (政治面貌信息)
                $.get("/politics_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('politicsName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].politicsType;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                // 获取下拉框信息 (大学信息)
                $.get("/university_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('universityName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].universityName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                // 获取下拉框信息 (专业信息)
                $.get("/major_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('majorName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].majorName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                // 获取下拉框信息 (市级信息)
                $.get("/city_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('cityName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].cityName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                // 获取下拉框信息 (公司信息)
                $.get("/company_option_message",{},function (data) {
                    let list = data;
                    const select = document.getElementById('companyName');
                    if (list != null) {
                        for (let c in list) {
                            let option = document.createElement("option");
                            option.setAttribute("value", list[c].id);
                            option.innerText = list[c].companyName;
                            select.appendChild(option)
                        }
                    }
                    form.render('select');
                },"json");
                //表单验证
                form.verify({
                    re_password : function () {
                        if ($('#password').val() !== $('#re_password').val()) {
                            return "两次密码输入不一致!";
                        }
                    }
                })
                /*上传图片*/
                const uploadInst = upload.render({
                    elem: '#portrait_btn',
                    url: '/upload_images',
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#portrait').attr('src', result); //图片链接（base64）
                        });
                    },
                    done: function (res) {
                        //如果上传失败
                        if (res.status > 0) {
                            return layer.msg('上传失败');
                        }
                        //上传成功
                        console.log(res.code)
                        if (res.code === 0) {
                            $('#img_url').attr("value",res.src)
                        }
                    },
                    error: function () {
                        //演示失败状态，并实现重传
                        const portraitText = $('#portraitText');
                        layer.msg('上传失败');
                        portraitText.html('<div><a style="display: block;margin: auto" class="layui-btn layui-btn-xs demo-reload">重试</a></div>');
                        portraitText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });
                //监听提交
                form.on('submit(edit)', function(data) {
                    $.ajax({
                        url : "/admin_user_student_message_save_or_edit",
                        method : 'post',
                        data : data.field,
                        dataType : 'JSON',
                        success : function(res) {
                            if (res.code === 0) {
                                //弹出提示，并在1秒后进行跳转
                                layer.alert("修改成功", {
                                    icon : 6
                                }, function() {
                                    //关闭当前frame
                                    xadmin.close();

                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                    return false;
                                });
                            } else {
                                layer.msg("修改失败:" + res.msg);
                                return false;
                            }
                        }
                    });
                    return false;
                });
            })
        </script>
    </body>
</html>